<%@page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/jsp/comm_css_include.jsp"%>
<!-- jqgrid-->
<link href="${basePath}/css/plugins/jqgriddemo/css/ui.jqgrid-bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${basePath}/js/plugins/chosen/docsupport/style.css?v=${empty cssVersion ? Math.random() : cssVersion }">
<link rel="stylesheet" href="${basePath}/js/plugins/chosen/docsupport/prism.css?v=${empty cssVersion ? Math.random() : cssVersion }">
<link href="${basePath}/js/plugins/chosen/chosen.css?v=${empty cssVersion ? Math.random() : cssVersion }" rel="stylesheet" type="text/css"/>
<!doctype html>
<html>
<head>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="iboxtitle">
			<span><i class="glyphicon glyphicon-map-marker"></i>&nbsp;系统管理&gt;基础信息管理&gt;汽车选择</span>
			<a href="javascript:void(0)"></a>
		</div>
		<div class="ibox-content tancQa">
			<div role="form" class="form-inline">
				<div class="form-group">
					<input type="text" placeholder="请输入汽车品牌" id="carNumber"
						class="form-control">
				</div>
				<button class="zhixcx" type="button" onclick="queryCars();">搜索车型</button>
				<button class="btn dpbtn_red" type="button" onclick="addCarseries();">增加车系</button>
				<button class="btn dpbtn_blue" type="button"
					onclick="addCarstyle();">增加车型</button>
			</div>
		</div>
		<div class="ibox-content">
			<div class="jqGrid_wrapper">
				<table id="table_list_1"></table>
				<div id="pager_list_1"></div>
			</div>
		</div>
	</div>

	<div class="ibox-content" id="addCarseries" style="display: none;">
		<form class="form-horizontal" id="commentForm">
			<div class="qiche-padding">
				<table cellpadding="0" cellspacing="0" border="0"
					bordercolor="#3B95C8" width="100%" class="tablefont">
					<tr>
						<td width="23%" align="right"><label
							class="col-sm-3 control-label np">品牌名称：</label></td>
						<td width="77%">
							<div class="form-group">
								<select id="carBrand" data-placeholder="选择车辆"  name="ppname" class="select-control" ></select>
							</div>
						</td>
					</tr> 

					<tr>
						<td width="23%" align="right"><label
							class="col-sm-3 control-label np">车系名称：</label></td>
						<td width="77%">
							<div class="form-group">
								<input id="xlname" name="xlname" type="text"
									class="form-control" required="required" aria-required="true"
									minlength="1" maxlength="100" placeholder="请输入名称(必填)">
							</div>
						</td>
					</tr>
				</table>
			</div>
			<div class="padding-nono">
				<table cellpadding="0" cellspacing="0" border="0"
					bordercolor="#3B95C8" width="100%">
					<tr>
						<td width="100%" align="center">
							<div class="ibox-content">
								<button type="button" class="btn dpbtn_green"
									onclick="saveCarSeries();">确定</button>
								<button type="button" class="btn dpbtn_red" onclick="cancel();">取消</button>
							</div>
						</td>
					</tr>
				</table>
			</div>
		</form>
	</div>

	<div class="ibox-content" id="addCarstyle" style="display: none;">
		<form class="form-horizontal" id="commentFormb">
			<div class="business-padding">
				<table cellpadding="0" cellspacing="0" border="0"
					bordercolor="#3B95C8" width="100%" class="tablefont">
					<tr  class="addCar">
						<td width="23%" align="right">
							<label class="col-sm-3 control-label np">品牌名称：</label></td>
						<td width="77%">
							<div class="form-group">
								<select id="carBrandb" name="ppname" class="select-control"></select>
							</div>
						</td>
					</tr>
					
					<tr  class="addCar">
						<td width="23%" align="right"><label
							class="col-sm-3 control-label np">车系名称：</label></td>
						<td width="77%">
							<div class="form-group">
								<select id="carSeriesb" name="xlname" class="select-control"></select>
							</div>
						</td>
					</tr>
					<tr  class="addCar">
						<td width="23%" align="right"><label
							class="col-sm-3 control-label np">车型名称：</label></td>
						<td width="77%">
							<div class="form-group">
								<input id="carModelb" name="cxname" type="text"
									class="form-control" required="required" aria-required="true"
									minlength="1" maxlength="100" placeholder="请输入名称(必填)">
							</div>
						</td>
					</tr>
					
					<tr class="updateCar">
						<td width="23%" align="right">
							<label class="col-sm-3 control-label np">汽车名称：</label></td>
						<td width="77%">
							<div class="form-group">
								<input id="carSeId" name="carSeId" type="hidden"/>
								<input id="carBrandName" name="carBrandName" class="form-control" readonly="readonly"/>
							</div>
						</td>
					</tr>
					
					
					<tr>
						<td width="23%" align="right"><label
							class="col-sm-3 control-label np">报价年份：</label></td>
						<td width="77%">
							<div class="form-group">
								<input id="pyear" name="pyear" type="number" min="2000"
									value="2017" class="form-control" required="required"
									aria-required="true" minlength="2" maxlength="20"
									placeholder="请输入报价年份(必填)">
							</div>
						</td>
					</tr>
					<tr>
						<td width="23%" align="right"><label
							class="col-sm-3 control-label np">发布年份：</label></td>
						<td width="77%">
							<div class="form-group">
								<input id="fbPyear" name="fbPyear" type="number" min="2000"
									value="2017" class="form-control" required="required"
									aria-required="true" minlength="2" maxlength="20"
									placeholder="请输入发布年份(必填)">
							</div>
						</td>
					</tr>
					<tr>
						<td width="23%" align="right"><label
							class="col-sm-3 control-label np">发布价格(万)：</label></td>
						<td width="77%">
							<div class="form-group">
								<input id="price" name="price" type="number"
									class="form-control" required="required" aria-required="true"
									minlength="2" maxlength="20" placeholder="请输入价格(必填)">
							</div>
						</td>
					</tr>
				</table>
			</div>
				<table cellpadding="0" cellspacing="0" border="0" bordercolor="#3B95C8" width="100%">
					<tr>
						<td width="100%" align="center">
							<div class="ibox-content">
								<button type="button" class="btn dpbtn_green saveCarModel" onclick="saveCarModel();">确定</button>
								<button type="button" class="btn dpbtn_green UpdateCarprice" onclick="UpdateCarprice();">保存</button>
								<button type="button" class="btn dpbtn_red" onclick="cancel();">取消</button>
							</div>
						</td>
					</tr>
				</table>
		</form>
	</div>
	
	<!-- public quote -->
	<%@include file="/jsp/comm_js_include.jsp"%>
	<!-- jqGrid -->
	<script type="text/javascript" charset="utf-8" src="${basePath}/js/plugins/jqgriddemo/js/jquery.jqGrid.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="${basePath}/js/plugins/jqgriddemo/js/grid.locale-cn.min.js"></script>
	<!-- 车品牌/车型/车系选择 -->
	<%@include file="/jsp/carModel_include.jsp"%>
	<script type="text/javascript" charset="utf-8" src="${basePath}/js/plugins/chosen/chosen.jquery.js?v=${empty cssVersion ? Math.random() : cssVersion }"></script>
	<script type="text/javascript" charset="utf-8" src="${basePath}/js/plugins/chosen/docsupport/prism.js?v=${empty cssVersion ? Math.random() : cssVersion } "></script>
	<script type="text/javascript" charset="utf-8" src="${basePath}/js/plugins/chosen/docsupport/init.js?v=${empty cssVersion ? Math.random() : cssVersion } "></script>
	<!--
    	作者：zhangpp
    	时间：2017-04-06
    	描述：js
    -->

	<script type="text/javascript">
    jQuery(function($) {  
    	getData();
   	    $("#carBrandb").change(function(){
   	    	var carBrandb = $("#carBrandb").val();
   	    	selectSeries(carBrandb, null, null,"#carSeriesb", "#carModelb");
   	    });
   	    //车系/车型选择
   	  /* $("#carSeriesb").change(function(){
   	    	var carSeriesb = $("#carSeriesb").val();
   	    	selectCars(carSeriesb, null, "#carModelb");
   	    }); */ 
   	 });
	    

    var Carserieslayer,CarModellayer;
	
	function addCarseries(){
		selectBrands(null, null, null, "#carBrand", "#carSeries", null);
		Carserieslayer=layer.open({
            type: 1,
            title: '增加车系',
            shadeClose: true,
            shade: 0.8,
            area: ['400px', '40%'],
            content: $("#addCarseries"),
            end: function () {
                refresh();
            }
        });
	} 
	
	function addCarstyle(){
		$(".addCar").show();
		$(".updateCar").hide();
		$(".saveCarModel").show();
  	    $(".UpdateCarprice").hide();
		selectBrands(null, null, null, "#carBrandb", "#carSeriesb", "#carModelb");
		CarModellayer = layer.open({
            type: 1,
            title: '增加车型',
            shadeClose: true,
            shade: 0.8,
            area: ['400px', '60%'],
            content: $("#addCarstyle"),
            end: function () {
                refresh();
            }
        });
	}    
	
	function saveCarSeries(){
		var validstatus = $("#commentForm").valid();
		if(!validstatus){
			return;
		}
		var data = {};
		data.ppname = $('#carBrand').val();
		data.brandId = $('#carBrand').val();
		data.ppid = $('#carBrand').val();
		data.xlname = $('#xlname').val();
		$.dpAjax({
	    	url:'${basePath}/JuheCarController/addCarSeries',
 			data:data,
 			success: function(datas){
					layer.msg("添加执行成功！", {icon: 6});
					$('#xlname').val("");
                    layer.close(Carserieslayer);
                    return;
               }
	    });
	} 
	
	function saveCarModel(){
		var validstatus = $("#commentFormb").valid();
		if(!validstatus){
			return;
		}
		var data = {};
		data.seriesId = $('#carSeriesb').val();
		data.carId = $('#carId').val();
		data.cxname = $('#carBrandb option:selected').text() + '' +$('#carSeriesb option:selected').text() + '' + $('#carModelb').val();
		data.pyear = $('#pyear').val();
		data.price = $('#price').val() + "万";
		data.fbPyear = $('#fbPyear').val();
		$.dpAjax({
	    	url:'${basePath}/JuheCarController/addCarModel',
 			data:data,
 			success: function(datas){
					layer.msg("添加执行成功！", {icon: 6});
					$('#pyear').val("");
					$('#price').val("");
					$('#fbPyear').val("");
                    layer.close(CarModellayer);
                    return;
               }
	    });
	} 
	
	function cancel(){
		 layer.closeAll();
	}
	
	var updateLayer;
	
	var getData = function(){
		winWidth = $(window).width();
        var winHeight = document.body.offsetHeight - 300;
        var win = winWidth / 7 - 20;
 	    $.jgrid.defaults.styleUI = 'Bootstrap';
		$("#table_list_1").jqGrid({
			url:'${basePath}/CarNumberSelectorController/queryCarList',
	       	datatype : "json",
		    colNames : [ '主键', '车型名称', '报价年份', '发布年份','价格'],
		    colModel : [ 
	             {name: 'replaceId',index: 'id',width: win,align: "center",sorttype: "float",hidden:true},
	             {name: 'cxname',index: 'cxname',width: win,align: "center",sorttype: "float"},
	             {name: 'pyear',index: 'pyear',width: win,align: "center",sorttype: "float"},
	             {name: 'fbPyear',index: 'fbPyear',width: win,align: "center",sorttype: "float"},
	             {name: 'price',index: 'price',width: win,align: "center",sorttype: "float"}],
	           mtype : "post",
	           height: winHeight,
	           width:winWidth,  
	           autowidth: true,
	           shrinkToFit: true,
	           rowNum: 15,
	           rowList: [15, 30, 45],
	           viewrecords: true,
	           pager: "#pager_list_1",
	           hidegrid: false,
	           multiselect : false,		//实现单选    multiboxonly:true   beforeSelectRow: true,
	           multiboxonly:false,  
	           beforeSelectRow: false,
	           altRows:true,
	           altclass:'someClass',
	           ondblClickRow:function(rowId,v,e)
	              {
	            	  var rowData = $("#table_list_1").jqGrid("getRowData", rowId);
	            	  var id = rowData.replaceId;
	            	  var cxname = rowData.cxname;
	            	  var fbPyear = rowData.fbPyear;
	            	  var price = rowData.price;
	            	  var reallyPrice = price.replace("万",""); 
	            	  var pyear = rowData.pyear;
	            	  var carAll = cxname.split(" ");
	            	  
	            	  $("#carSeId").val(id);
	            	  $("#fbPyear").val(fbPyear);
	            	  $("#price").val(reallyPrice);
	            	  $("#pyear").val(pyear);
	            	  
	            	  $("#carBrandName").val(cxname);
	            		
	            	  $("#fbPyear").attr("readonly","readonly");
	            	  $("#pyear").attr("readonly","readonly");
	            	  $(".addCar").hide();
	            	  $(".updateCar").show();
	            	  $(".saveCarModel").hide();
	            	  $(".UpdateCarprice").show();
	            	  updateLayer =  layer.open({
	    		    	  type: 1,
	    		    	  title: '修改车价',
	    		    	  shadeClose: true,
	    		    	  shade: 0.8,
	    		    	  area: ['400px', '50%'],
	    		    	  content: $("#addCarstyle"),
	    		    	  end: function () 
	    		    	  {
	    		    		  refresh();
	    		          }
	    	    	});  	  
	           },
	           jsonReader: {
	                root: "result.rows",
	                page: "result.page",
	                total: "result.total",
	                records: "result.records",
	                repeatitems: false,
	                id: "id"
	            },
	            loadComplete:function(datas){
	          	  if (datas.flag == "100100") {
	                    layer.msg("查询成功!", {icon: 6, time: 1000});
	                    return;
	                }
	          	  if(datas.flag == '100802') {
	  				  top.location.href = thisLoginUrl;
	  				  return;
	  			  }

	          	  layer.msg(datas.message, {icon: 2});
	            }
	      });
	}
	
	
	function UpdateCarprice(){
		var validstatus = $("#commentFormb").valid();
		if(!validstatus){
			return;
		}
		var data = {};
		data.id = $('#carSeId').val();
		data.pyear = $('#pyear').val();
		data.price = $('#price').val() + "万";
		data.fbPyear = $('#fbPyear').val();
		$.dpAjax({
	    	url:'${basePath}/CarNumberSelectorController/modify',
 			data:data,
 			success: function(datas){
					layer.msg("添加执行成功！", {icon: 6});
                    layer.close(updateLayer);
                    return;
               }
	    });
	} 
	
	var query = function() {
    	var postData = $("#table_list_1").jqGrid("getGridParam", "postData");
    	var data = {};
    	data.customerName = document.getElementById('carNumber').value || '';
    	$.extend(postData, data);
    	refresh();
    }
    
    var refresh = function() {
    	$("#table_list_1").jqGrid("setGridParam", { search: true }).trigger("reloadGrid");
    }
	  	 //搜索
	var queryCars = function(){
    	var seriesId=$("#carNumberHiddenId").val();
		var cxname=$("#carNumber").val();
    	$("#table_list_1").jqGrid("setGridParam",{
    		url:'${basePath}/CarNumberSelectorController/queryCarList',
  				postData:{
  		        	"seriesId":seriesId,
  		        	"cxname":cxname
  		        },
  				datatype:"json"
    	}).trigger("reloadGrid", [{ page: 1}])
    }
	  	 
	$(function(){	
        $("#commentForm").validate({
            //重写showErrors
            showErrors: function (errorMap, errorList) {
                
                $.each(errorList, function (i, v) {
                    layer.tips(v.message, v.element, { time: 1500 });
                    return false;
                });  
            },
            /* 失去焦点时验证 */
            onfocusout: function(element) { $(element).valid(); },
            /*  键盘抬起不验证 */
            onkeyup:false,
        });
        
        $("#commentFormb").validate({
            //重写showErrors
            showErrors: function (errorMap, errorList) {
                
                $.each(errorList, function (i, v) {
                    layer.tips(v.message, v.element, { time: 1500 });
                    return false;
                });  
            },
            /* 失去焦点时验证 */
            onfocusout: function(element) { $(element).valid(); },
            /*  键盘抬起不验证 */
            onkeyup:false,
        });
	});
    </script>
</body>
</html>
